<!-- <template>
    <div>

        <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                    <ButtonGroup>
                        <Button @click="changeType(1)" :class="{active1: formValidate.type ===1 }">新闻分类</Button>
                    </ButtonGroup>
                    <Tree :data="baseData" @on-select-change="getCheckedNodes"></Tree>
                </div>
            </div>

        <Button type="primary" @click="onAdd">添加</Button>
        <Input v-model="filter.name">
            <Button slot="append" icon="ios-search" @click="onSearch"></Button>
        </Input>
        <Button type="error" @click="onDeletes">删除多条记录</Button>

        <Table border :columns="columns" :data="filter.list" @on-selection-change="onSelectionChange"></Table>
        <Page :total="filter.total" size="small"
         show-total show-elevator show-sizer
         @on-change="onChange"
         @on-page-size-change="onPageSizeChange"></Page>

        <Modal
            v-model="modal"
            title="数据操作"
        >
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">

                <FormItem label="姓名" prop="name">
                    <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
                </FormItem>
                <FormItem label="内容" prop="content">
                    <Input v-model="formValidate.content" placeholder="请输入内容"></Input>
                </FormItem>
                
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem> 
            </Form>
        </Modal>

    </div>
</template>
<script>
import base from '../.././common/base'

    export default {
        mixins:[base],
        data () {
            return {
                module:'news',
                baseData: [],
                formValidate: {
                    name: '',
                    content: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '密码不能为空', trigger: 'blur' }
                    ]
                },

                columns: [
                     {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        key: '_id',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row._id)
                            ]);
                        }
                    },
                    {
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '内容',
                        key: 'content'
                    },
                    {
                        title: '增删改查',
                        key: 'data',
                        width: 240,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'success',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.onAdd()
                                        }
                                    }
                                }, '添加'),
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.modify(params.index)
                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.row)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            // console.log(params.row._id)
                                            
                                            this.remove(params.row._id)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ]
            }
        },
        methods :{
            changeType(type){
                console.log(type)
                this.getTree(type)
            },
            getTree(type){
                this.formValidate.type=type;
                this.$http({
                    method:'GET',
                    url:'http://localhost:3000/cate/list/'+type

                }).then((response) => {
                    this.baseData=response.data;
                })
            },
            getCheckedNodes(arr){
                console.log(arr[0]._id)
                this.formValidate.parentId=arr[0].parentId
                
                this.formValidate._id=arr[0]._id
                this.formValidate.title=arr[0].title

                this.formValidate1.parentId=arr[0]._id
                this.formValidate1.title=arr[0].title
                console.log(this.formValidate)
                console.log(this.formValidate1)
            },
            created(){
                this.getTree(1)
            }
        }
    }
</script> -->

<!-- 
<template>
    <div>
    <div style="float:left">
     <Tree :data="baseData" @on-select-change="getCheckedNodes" ></Tree> 
    </div>
    <div style="float:right;width:80%" >
        <Button type="primary" @click="addData">添加新闻</Button>
      <Button type="primary" @click="alldeletd">删除选中</Button>
        <Input v-model="filter.title">
          <Button slot="append" icon="ios-search" @click="search"></Button>
        </Input>
        <Table border ref="selection"  @on-selection-change="allNode" :columns="columns1" :data="list"></Table>
        <Page :total="filter.total" show-elevator show-total size="small"  show-sizer :page-size-opts="[2,4,8,10]" @on-page-size-change="changePageSize" :page-size="2" @on-change="changePage" ></Page>
      </div>
        <Modal
        v-model="modal1"
        title="普通的Modal对话框标题"
        @on-ok="ok"
        @on-cancel="cancel">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="标题" prop="title">
            <Input v-model="formValidate.title" placeholder="请输入标题"></Input>
        </FormItem>
        <FormItem label="副标题" prop="xiaotitle">
            <Input v-model="formValidate.subheading" placeholder="请输入副标题"></Input>
        </FormItem>
        <FormItem label="作者" prop="author">
            <Input v-model="formValidate.author" placeholder="请输入作者"></Input>
        </FormItem>
        
        <FormItem label="内容" prop="content">
             <quill-editor v-model="formValidate.content"
                ref="myQuillEditor"></quill-editor>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')" to='/user'>提交</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
        </FormItem>
    </Form>
    </Modal>
    </div>
</template>
<script>
    import Base from '../../common/base1.js';
    import { quillEditor } from 'vue-quill-editor'
 export default {
        mixins:[Base],
        data () {
            return {
                module:'news',
                baseData: [],
                columns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '标题',
                        key: 'title'
                    },
                    {
                        title: '副标题',
                        key: 'subheading'
                    },
                    {
                        title: '时间',
                        key: 'date'
                    },
                    {
                        title: '作者',
                        key: 'author'
                    },
                    {
                        title: '内容',
                        key: 'content'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 120,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on:{
                                      click:()=>{
                                        this.deleteData(params.row._id);
                                      }
                                    }
                                }, '删除'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on:{
                                      click:()=>{

                                        this.editData(params.row._id);
                                        console.log(params.row._id);
                                      }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on:{
                                      click:()=>{
                                        var newsId=params.row._id
                                        addCookie('newsId',newsId,7);
                                        window.location.href="http://localhost:8080/comment"
                                      }
                                    }
                                }, '评论')
                            ]);
                        }
                    }
                ],
                 id:'',
                formValidate: {
                    cateId:'',
                    title: '',
                    subheading: '',
                    userId:'',
                    author: '',
                    content: '',
                    date: ''
                },
                ruleValidate: {
                    title: [
                        { required: true, message: '标题不能为空', trigger: 'blur' }
                    ],
                    subheading: [
                        { required: true, message: '副标题不能为空', trigger: 'blur' }
                    ],
                    author: [
                        { required: true, message: '作者不能为空', trigger: 'change' }
                    ],
                    content: [
                        { required: true, message: '内容不能为空', trigger: 'change' }
                    ]
                }
            }
        },
        components: {
            quillEditor
          },
         methods:{
          //这个获取新闻
          getCheckedNodes(arr){
                
                this.formValidate.cateId=arr[0]._id;
                console.log(arr[0]._id);
                this.$http({
                  method:'POST',
                  url: `http://localhost:3000/news/list`,
                  data:{cateId:this.formValidate.cateId}
                  
                }).then(res=>{
                  //console.log(res.data);
                  this.list=res.data.rows;
                  this.filter.total=res.data.total;
                  //console.log(res.data.rows);
                  //console.log(res.data.rows);
                })
   
            },
          getTree(type){
                this.formValidate.type=type;
                this.$http({
                    method:'GET',
                    url:'http://localhost:3000/cate/list/'+type
                }).then((response) => {
                    this.baseData=response.data;
                })
            },
            ok () {
              this.getData();
              this.$Message.info('点击了确定');
          },
          cancel () {
            this.getData();
            this.$Message.info('点击了取消');
          },
          handleSubmit (name) {
              this.$refs[name].validate((valid) => {
                  if (valid) {
                       var url='';
                       if(this.id){
                          url='http://localhost:3000/news/data/'+this.id;
                       }else{
                        //this.formValidate.newsId=getCookie('newsId');
                        //console.log('new add');
                        url='http://localhost:3000/news/data';
                       }
                       this.$http({
                          method:'POST',
                          url: url,
                          data:this.formValidate
                        }).then(response=>{
                         // console.log('new add');
                          //console.log(response.data);
                        })
                      this.$Message.success('提交成功!');
                  } else {
                      this.$Message.error('表单验证失败!');
                  }
              })
          },
          handleReset (name) {
              this.$refs[name].resetFields();
          }
        },
        created(){
            this.getTree(1)
        }

    }
</script> -->


<template>
  <div>
    <div style="float:left">
     <Tree :data="baseData" @on-select-change="getCheckedNodes" ></Tree>
    </div>
    <div style="float:right;width:80%">
       <Button type="primary" @click="addData">添加新闻</Button>
        <Button type="primary" @click="alldeletd">删除选中</Button>
        <Input v-model="filter.content">
              <Button slot="append" icon="ios-search" @click="search"></Button>
        </Input>
        <Table border ref="selection"  @on-selection-change="allNode" :columns="columns1" :data="list"></Table>
            <Page :total="filter.total" show-elevator show-total size="small"  show-sizer :page-size-opts="[2,4,8,10]" @on-page-size-change="changePageSize" :page-size="2" @on-change="changePage" ></Page>
    </div>
    <Modal
        v-model="modal1"
        title="普通的Modal对话框标题"
        @on-ok="ok"
        @on-cancel="cancel">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="标题" prop="title">
            <Input v-model="formValidate.title" placeholder="请输入标题"></Input>
        </FormItem>
        
        <FormItem label="作者" prop="author">
            <Input v-model="formValidate.author" placeholder="请输入作者"></Input>
        </FormItem>
        
        <FormItem label="内容" prop="content">
             <quill-editor v-model="formValidate.content"
                ref="myQuillEditor"></quill-editor>
        </FormItem>
        
        
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')" to='/user'>提交</Button>
            <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
        </FormItem>
    </Form>
    </Modal>

 </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import base from '../.././common/base1'
    export default {
        mixins:[base],
        data () {
            return {
                baseData: [],
                module:'news',
                columns1: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '标题',
                        key: 'title'
                    },
                    {
                        title: '内容',
                        key: 'content'
                    },
                    {
                        title: '作者',
                        key: 'author'
                    },
                    {
                        title: '时间',
                        key: 'date'
                    },
                    
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 150,
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on:{
                                      click:()=>{
                                        this.deleteData(params.row._id);
                                      }
                                    }
                                }, '删除'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on:{
                                      click:()=>{
                                        this.editData(params.row._id);
                                        console.log(params.row._id);
                                      }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on:{
                                      click:()=>{
                                        //var newsId=params.row._id
                                        //addCookie('newsId',newsId,7);
                                        this.$router.push({path:`./comment/${params.row._id}`})
                                      }
                                    }
                                }, '评论')
                            ]);
                        }
                    }
                ],
                id:'',
                formValidate: {
                    content:'',
                   
                },
                ruleValidate: {
                    content: [
                        { required: true, message: '内容不能为空', trigger: 'change' }
                    ]
                }
            }
        },
        methods:{
            getCheckedNodes(arr){
                this.formValidate.cateId=arr[0]._id;
                this.$http({
                  method:'POST',
                  url: `http://localhost:3000/news/list`,
                  data:{cateId:this.formValidate.cateId}
                }).then(res=>{
                  // console.log(res.data);
                  this.list=res.data.rows;
                  this.filter.total=res.data.total;
                  console.log(res.data.total);
                })
   
            },
            getTree(type){
                this.formValidate.type=type;
                this.$http({
                    method:'GET',
                    url:'http://localhost:3000/cate/list/'+type
                }).then((response) => {
                    this.baseData=response.data;
                })
            },
            ok () {
              this.getData();
              this.$Message.info('点击了确定');
          },
          cancel () {
            this.getData();
            this.$Message.info('点击了取消');
          },
          // handleSubmit (name) {
          //     this.$refs[name].validate((valid) => {
          //         if (valid) {
          //              var url='';
          //              if(this.id){
          //                 url='http://localhost:3000/news/data/'+this.id;
          //              }else{
          //               url='http://localhost:3000/news/data';
          //               this.formValidate.newsId=getCookie('newsId');
          //               this.formValidate.userId=getCookie('userId');
          //              }
          //              this.$http({
          //                 method:'POST',
          //                 url: url,
          //                 data:this.formValidate
          //               }).then(response=>{
          //                 console.log(response.data);
          //               })
          //             this.$Message.success('提交成功!');
          //         } else {
          //             this.$Message.error('表单验证失败!');
          //         }
          //     })
          // },
          handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.formValidate._id && this.formValidate._id.length>0){
                            this.$http.put(`http://localhost:3000/news/data/${this.formValidate._id}`,this.formValidate)
                            .then(res=>{
                                this.$Message.success('提交成功!');
                                this.modal = false;
                                this.getData();
                            })
                        }else{
                            this.$http.post(`http://localhost:3000/news/data`,this.formValidate)
                            .then(res=>{
                                this.$Message.success('提交成功!');
                                this.modal = false;
                                this.getData();
                            })
                        }
                        
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
          handleReset (name) {
              this.$refs[name].resetFields();
          }
        },
        components: {
            quillEditor
          },
        created(){
            this.filter.cateId = this.formValidate.cateId;
            this.getTree(1);
        }
    }
</script>
